<template>
	<view class="create">
		<view class="formsBox">
			<uni-forms ref="form" :modelValue="formData" :label-width="100" :rules="rules">
				<uni-forms-item label="原文机关" name="originalTextAgency">
					<uni-easyinput type="text" :disabled="!!processId" v-model="formData.originalTextAgency" placeholder="请输入原文机关" />
				</uni-forms-item>
				<uni-forms-item label="接文时间" name="startTime">
					<uni-datetime-picker :disabled="!!processId" type="datetime" v-model="formData.startTime" return-type="timestamp" placeholder="请选择接文时间" />
				</uni-forms-item>
				<uni-forms-item label="原文号" name="originalArticleNum">
					<uni-easyinput type="text" :disabled="!!processId" v-model="formData.originalArticleNum" placeholder="请输入原文号" />
				</uni-forms-item>
				<uni-forms-item label="顺序号" name="sequenceNum">
					<uni-easyinput type="text" :disabled="!!processId" v-model="formData.sequenceNum" placeholder="请输入顺序号" />
				</uni-forms-item>
				<uni-forms-item label="文件标题" name="deptName">
					<uni-easyinput type="text" :disabled="!!processId" v-model="formData.deptName" placeholder="请输入文件标题" />
				</uni-forms-item>
				<uni-forms-item label="文件" name="files">
					<uploadFile v-model="formData.files" :disabled="!!processId" />
				</uni-forms-item>
				<!-- <view class="ldpsBox">
					<view class="">领导批示</view>
					<uni-forms-item label="批示内容" name="memorandum">
						<uni-easyinput disabled type="text" v-model="formData.memorandum" placeholder="请输入批示内容" />
					</uni-forms-item>
					<uni-forms-item label="领导签字" name="electronicSignature">
						<sign v-model="formData.electronicSignature" />
					</uni-forms-item>
					<uni-forms-item label="选择分管领导" name="userId">
						<userMultiple disabled v-model="formData.distributorDetails" />
					</uni-forms-item>
				</view> -->
				<view class="ldpsBox" v-if="formData.suggestedByPeoples && formData.suggestedByPeoples.length > 0">
					<view class="">领导批示</view>
					<view class="fgldps ldpsCon">
						<view class="texts">
							{{formData.ldpsObj.reason}}
						</view>
						<view class="qmBox">
							<image v-if="formData.ldpsObj.signPicUrl" :src="formData.ldpsObj.signPicUrl" mode="heightFix" style="height: 40rpx;"></image>
							<text>{{$u.timeFormat(formData.ldpsObj.endTime, 'dd/mm')}}</text>
						</view>
					</view>
				</view>
				
				<view class="ldpsBox" v-if="formData.yzqmList && formData.yzqmList.length > 0">
					<view class="">阅者签名</view>
					<view class="fgldps ldpsContwo" >
						<view class="items" v-for="(item,index) in formData.yzqmList">
							<view class="texts">{{item.reason}}</view>
							<view class="qmBox">
								<image v-if="item.signPicUrl" :src="item.signPicUrl" mode="heightFix" style="height: 40rpx;"></image>
								<text>{{$u.timeFormat(item.endTime, 'dd/mm')}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="ldpsBox">
					<view class="">分管领导批示</view>
					<view class="fgldps" v-for="(item,index) in formData.distributorDetails">
						<view class="names">{{item.userName}}</view>
						<uni-forms-item label="批示内容" name="remark">
							<uni-easyinput disabled type="text" v-model="item.remark" placeholder="请输入批示内容" />
						</uni-forms-item>
						<uni-forms-item label="领导签字" name="signature">
							<sign v-model="item.signature" />
						</uni-forms-item>
						<uni-forms-item label="选择科长" name="distributorDetails">
							<userMultiple disabled v-model="item.distributorDetails" />
						</uni-forms-item>
					</view>
				</view>
				<view class="ldpsBox">
					<view class="">科长意见</view>
					<view class="fgldps" v-for="(item,index) in formData.distributorDetails">
						<block v-for="items in item.distributorDetails">
							<view class="names">{{items.userName}}</view>
							<uni-forms-item label="批示内容" name="remark">
								<uni-easyinput disabled type="text" v-model="items.remark" placeholder="请输入批示内容" />
							</uni-forms-item>
							<uni-forms-item label="领导签字" name="signature">
								<sign v-model="items.signature" />
							</uni-forms-item>
							<uni-forms-item label="选择科长" name="distributorDetails">
								<userMultiple disabled v-model="items.distributorDetails" />
							</uni-forms-item>
						</block>
					</view>
				</view> -->
			</uni-forms>
		</view>
		<view class="buttonBox" v-if="!processId">
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
		<!-- 签名选择 -->
		<u-action-sheet :actions="list" title="选择签名方式" :show="show" @select="selectList" @close="actionClose" closeOnClickOverlay></u-action-sheet>
	</view>
</template>

<script>
	import uploadFile from '@/components/common/uploadFile.vue'
	import userMultiple from '@/components/user/userMultiple.vue'
	import sign from '@/components/common/sign.vue'
	import {createOaDocumentCirculation} from '@/api/oa/oadocumentcirculation/index.js'
	import {httpStrToArr} from '@/utils/common.js'
	export default {
		components:{
			uploadFile,
			userMultiple,
			sign
		},
		props:{
			processId:'',
			propFromData:{}
		},
		watch:{
			propFromData(val){
				let arr =httpStrToArr(val.files);
				let electronicSignature =httpStrToArr(val.electronicSignature);
				this.formData = val;
				this.formData.files = arr;
				console.log(this.formData)
				console.log(electronicSignature)
				// 领导批示及阅者签名内容区分
				this.formData.ldpsObj = {}
				this.formData.yzqmList = []
				this.formData.suggestedByPeoples.forEach((item) => {
					if (item.type == 1) {
						// 主任
						this.formData.ldpsObj = item
					} else {
						// 其他
						this.formData.yzqmList.push(item)
					}
				})
				this.formData.electronicSignature = electronicSignature[0];
			},
		},
		data() {
			return {
				formData:{
					applicant:'',
					originalTextAgency:'',
					startTime:'',
					originalArticleNum:'',
					sequenceNum:'',
					deptName:'',
					files:[],
				},
				rules: {
					originalTextAgency: {
						rules: [{
							required: true,
							errorMessage: '请输入原文机关',
						}]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请选择请假结束时间',
						}]
					},
					originalArticleNum: {
						rules: [{
							required: true,
							errorMessage: '请选择原文号',
						}]
					},
					sequenceNum: {
						rules: [{
							required: true,
							errorMessage: '请输入顺序号',
						}]
					},
					deptName: {
						rules: [{
							required: true,
							errorMessage: '请输入文件标题',
						}]
					},
					files:{
						rules: [{
							required: true,
							errorMessage: '请选择文件',
						}]
					}
				},
				show:false,
				list:[],
			};
		},
		methods:{
			// 点击提交
			async submit(){
				this.$refs.form.validate().then(async res => {
					try{
						let info = await createOaDocumentCirculation(this.formData);
						uni.hideLoading()
						uni.showToast({
							title:'发起成功',
							icon:'none',
							success: () => {
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/process/doccirculate/index'
									})
								},1500)
							}
						})
					}catch(err){
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log('表单错误信息：', err);
				})
			},
		},
		onLoad() {
			this.formData.applicant = this.$store.state.user.oaUser.name;
		}
	}
</script>

<style lang="less" scoped>
.create{
	width: 100%;
	height: auto;
	padding-top: 20rpx;
	.formsBox{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		.uni-forms-item{
			margin-bottom: 30rpx;
		}
		.itemBox{
			.btnBoxs{
				display: flex;
				align-items: center;
			}
		}
		.ldpsBox{
			background-color: antiquewhite;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			/deep/.uni-easyinput__content{
				background-color: rgba(255, 255, 255, 0.1) !important;
			}
			.signImg{
				width: 100%;
				height: 80rpx;
			}
			.fgldps{
				width: 100%;
				height: auto;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				margin-top: 10rpx;
			}
			.ldpsCon{
				.qmBox{
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
			.ldpsContwo{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				.items{
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					padding: 5rpx 10rpx;
					background-color: antiquewhite;
					border-radius: 5rpx;
					overflow: hidden;
					.qmBox{
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
	.buttonBox{
		width: 100%;
		height: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>
